<template>
          <div>
       <div class="u-title-1">
           <h3>
               <span>听歌排行榜</span>
           </h3>
           <h4>累计听歌6620首</h4>
           <span class="n-iconpoint">
               <a href="javascript:;" class="u-icn2" @mouseenter="tips_flag" @mouseleave="tips_flag">
                </a>
               
                <div class="tips" v-if="t_flag">
                 <p>实际播放时间过短的歌曲将不纳入计算。</p>
                 <i class="t"></i>
                  <i class="b"></i>
                </div>
              
           </span>
           <div class="nav">
               <span :class="1 == click_flag?'songsweek':''" @mousedown="p_Time(1)">最近一周</span>
               <i></i>
               <span @mousedown="p_Time(0)" :class="0 == click_flag?'songsweek':''">所有时间</span>
              
               
           </div>
         </div>
      <div class="m-record"  @mouseleave="box_leave">
          <div class="loading" v-show="loadFlag">
              <img src="../images/5-121204193Q9-50.gif" alt="">加载中...
          </div>
             <ul v-show="!loadFlag">
                 <li v-for="(el,index) in Data_20" :key="el.song.id" @mouseenter="li_show(index)">
                     <div class="hd">
                         <span class="ply" @mousedown="ply(el.song)">&nbsp;</span>
                         <span class="num overtext">{{index + 1}}.</span>
                     </div>
                     <div class="song overtext">
                         <span class="txt">
                             <a href="javascript:;" :title="el.song.name" class="col">
                                 {{el.song.name}}
                             </a>
                             <span class="ar">
                                 <em>-</em>
                                 <span v-for="(data,index) in el.song.ar" :key="index"><i v-text="index > 0?'/':''"></i>{{data.name}}</span>
                             </span>
                         </span>
                          <div class="opt">
                              <Fns v-show="index == show_flag" :song='el.song'/>
                          </div>
                        
                     </div>
                       <div class="tops">
                               <span class="bg" :style="'width:' + el.score + '%'"></span>
                          </div>
                 </li>
                 
             </ul>
            
         </div>
          <div class="more" v-if="s_num == 10">
                
                 <router-link :to="{
                     path:'/user/songs',
                     query:{
                         id:nid,
                     }
                 }">查看更多></router-link>
             </div>
         </div>
</template>
  
<script>
import axios from 'axios'
import Fns from '../components/Fns.vue'
export default {
       name:'DetailPlay',
       data(){
           return{
               Data_20:[],
               click_flag:'1',
               loadFlag:true,
               s_num:10,
               show_flag:-1,
               t_flag:false,
               u_id:''
              
           
           }
       },
       props:['nid'],
       components:{
           Fns
       },
       methods:{
          
              p_Time(index){
                 
          this.loadFlag = true;
           this.click_flag = index;
           axios.get('http://localhost:8080/api/user/record',{
            params:{
                uid:this.nid?this.nid:this.$route.query.id,
                type:index
               
            },
            headers:{
                 withCredentials: true,
            }
        }).then( (response) => {
           
            if (index) {
               
            
            setTimeout( () => {
                this.loadFlag = false;
             this.Data_20 = response.data.weekData.slice(0,this.s_num);
            },400)  
           
            }else {
                
              
            setTimeout( () => {
                this.loadFlag = false;
             this.Data_20 =  response.data.allData.slice(0,this.s_num);
            },400)  
             
            }
            
           
        })  
       },
       li_show(index){
           
           this.show_flag = index
       },
       tips_flag(){
        this.t_flag = !this.t_flag
       },
       box_leave() {
           this.show_flag = -1;
       },
       ply(data){
        
        this.$bus.$emit('musicList',data)
       }

       },
      
       mounted() {
           
       
           this.loadFlag = true;
            axios.get('http://localhost:8080/api/user/record',{
            params:{
                uid:this.nid?this.nid:this.$route.query.id,
                type:'1'
               
            },
            headers:{
                 withCredentials: true,
            }
        }).then( (response) => {
            
            setTimeout( () => {
                this.loadFlag = false;
             this.Data_20 = response.data.weekData.slice(0,this.s_num);
            },400)  
           
           
           
        },(err) => {
            
          console.log(err);
        }
        );
           
        this.Date_num = this.$route.query.num;
       },
       activated(){
           this.s_num = 100;
       }, 
       deactivated() {
           this.s_num = 10;
       },
       
      
    
       
       
       
}
</script>

<style lang="less" scoped>
.u-title-1 {
    height: 33px;
    border-bottom: 2px solid #c20c0c;
    color: #666;
    text-align: left;
    h3 {
        float: left;
        font-size:20px;
        line-height: 28px;
        font-weight: normal;
        
        
    }
    h4 {
        float: left;
       
        margin: 4px 0 0 10px;
        line-height: 26px;
        font-weight: 400;
        
    }
}
.n-iconpoint {
    margin: 0 0 0 10px;
    position: relative;
    top: 5px; 
    line-height: 18px;
}
.u-icn2 {
    width: 18px;
    height: 18px;
    vertical-align: bottom;
    overflow: hidden;
    display: inline-block;
    background: url(../images/icon2.png) no-repeat 0 -50px;
    &:hover {
        background: url(../images/icon2.png) no-repeat -20px -50px;
    }
}
.nav {
    float: right;
    span {
        line-height: 26px;
        cursor: pointer;
        float: left;
        margin-left: 8px;
    }
    i {
        float: left;
        width: 0.5px;
        height: 12px;
        margin-top: 7px;
        background-color: #999;
         margin-left: 8px;

    }
    .songsweek {
    color: #333;
    font-weight: 700;
    }
}
.tips {
    
    position: absolute;
    top: 31px;
    left: -34px;
    width: 295px;
    line-height: 20px;
    padding: 8px 19px 7px 19px;
    z-index: 2;
    color: #666;
    background: url(../images/top_m.png) repeat-y 0 0;
    .t {
      position: absolute;
      top: -15px;
      left: 0px;
      width: 327px;
      height: 16px;
      background: url(../images/top_t.png) no-repeat 0 0;
    }
    .b {
        position: absolute;
        width: 327px;
        height: 12px;
        left: 0;
        bottom: -12px;
        background: url(../images/top_b.png) no-repeat 0 0;
    } 
}
.m-record {
    margin-bottom: 20px;
    ul {
        border:1px solid #e2e2e2;
        border-top: none;
    }
    li {
        height: 38px;
        line-height: 38px;
        overflow: hidden;
        &:nth-child(2n) {
            background-color: #f7f7f7;
        }
     
        .hd {
            float: left;
            width: 72px;
            height: 38px;
            overflow: hidden;
        .num {
            float: left;
            padding: 0 8px 0 5px;
            width: 37px;
            text-align: right;
            font-size: 16px;
            color: #666;

        }
                      
    }
   
        
}

.ply {
        float: right;
        margin-top:10px;
        width: 17px;
        height: 17px;
        cursor: pointer;
        background: url(../images/table.png) no-repeat 0 -103px;
        &:hover {
            background: url(../images/table.png) no-repeat 0 -128px;
        }
    }

}
.song {
    float: left;
    position: relative;
    padding: 0 120px 0 10px;
    z-index: 1;
   
    width: 360px;
    height: 38px;
  
    text-align: left;
    .col {
        color: #333;
        font-weight: 700;
    }
}
.ar {
    color: #aeaeae;
    em {
        margin: 0 5px;
    }
}
.opt {
    position: absolute;
    top: 12px;
    right: 0;
}
.tops {
    float: right;
    position: relative;
    z-index: 1;
    width: 319px;
    height: 38px;
    line-height: 38px;
    .bg {
        position: absolute;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 38px;
        background-color: #4eb4f5;
        opacity: .1;
    }
}
.more {
    text-align: right;
    height: 32px;
    line-height: 32px;
   
  
}
.loading {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 10px 0 0;
    img {
        margin-right: 4px;
        width: 20px;
        height: 20px;
    }
}
</style>